<script setup>
const emit = defineEmits()
const props = defineProps({
  modelValue: {
    type: Number || String,
    default: 1
  },
  disabled: {
    type: Boolean,
    default: false
  },
  label: {
    type: String,
    default: ''
  }
})
const data = ref(1)

watch(
  () => props.modelValue,
  val => {
    data.value = Number(val || 2)
  },
  { deep: true, immediate: true }
)

watchEffect(() => {
  emit('update:modelValue', data.value)
})

const change = val => {
  emit('change', val)
}
const beforeChange = () => {
  emit('beforeChange', val)
}
</script>

<template>
  <div class="flex-item-center">
    <label style="margin-right: 10px">{{ props.label }}</label>
    <el-switch @change="change" :disabled="props.disabled" v-model="data" :active-value="1" :inactive-value="2" />
  </div>
</template>
